<template>
  <view class="t-register">
    <!-- 页面装饰图片 -->
    <image class="img-a" src="@/static/tduck/login/2.png"></image>
    <!-- 标题 -->
    <view class="t-b">{{ title }}</view>
    <u-form
      :model="form"
      ref="uForm"
      :label-width="'130'"
      :label-align="'left'"
    >
      <u-form-item label="账号" prop="userName" :border-bottom="false">
        <u-input border v-model="form.userName" placeholder="请输入账号名" />
      </u-form-item>
      <u-form-item label="密码" prop="password" :border-bottom="false">
        <u-input
          type="password"
          border
          v-model="form.password"
          placeholder="请输入密码"
        />
      </u-form-item>
      <u-form-item label="确认密码" prop="nowPassword" :border-bottom="false">
        <u-input
          type="password"
          border
          v-model="form.nowPassword"
          placeholder="请确认密码"
        />
      </u-form-item>
      <u-form-item label="昵称" prop="nickName" :border-bottom="false">
        <u-input border v-model="form.nickName" placeholder="请输入昵称" />
      </u-form-item>
    </u-form>
    <view class="register-bootom">
      <text @tap="login">已有账号？ 直接登录</text>
      <button type="primary" @tap="register()">提交注册</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.form.confirmPwd !== '') {
        // 	// this.$refs.uForm.validateField('confirmPwd');
        // 	callback(new Error('请输入新密码'));
        // }
        callback();
      }
    };
    var nowValidatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      title: "没有账号，注册一个吧", //填写logo或者app名称，也可以用：欢迎回来，看您需求
      form: {
        userName: "",
        nickName: "",
        password: "",
        nowPassword: "",
      },
      rules: {
        userName: [
          // 对name字段进行长度验证
          {
            min: 5,
            message: "用户名不能少于5个字",
            trigger: "change",
          },
          // 对name字段进行必填验证
          {
            required: true,
            message: "请填写账号名",
            trigger: ["change", "blur"],
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          },
          {
            trigger: "blur",
            min: 6,
            max: 16,
            message: "密码长度为6-16位",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        nowPassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
          {
            validator: nowValidatePass,
            trigger: "blur",
            required: true,
          },
        ],
        nickName: [
          {
            required: true,
            trigger: "blur",
            message: "昵称不能为空",
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    register() {
      let that = this;
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u.api.register(that.form).then((res) => {
            this.$u.toast("注册成功");
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/user/login",
              });
            }, 1000);
          });
        } else {
          this.$u.toast("请正确填写各项数据");
        }
      });
    },

    login() {
      uni.reLaunch({
        url: "/pages/user/login",
      });
    },
  },
};
</script>

<style>
.register-bootom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.register-bootom text {
	color: #5677fc;
	margin: 20rpx;
}

.register-bootom button {
  font-size: 28rpx;
  background: #5677fc;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
  width: 100%;
  margin-top: 10rpx;
}

.img-a {
  position: absolute;
  width: 100%;
  top: -150rpx;
  right: 0;
}

.t-register {
  width: 650rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
}

.t-register .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #000;
  padding: 320rpx 0 30rpx 0;
  font-weight: bold;
  z-index: 999;
}

.t-register .t-b2 {
  text-align: left;
  font-size: 32rpx;
  color: #aaaaaa;
  padding: 0rpx 0 120rpx 0;
}
</style>
